<template>
    <div id="bgBox">
        <el-form style="width:25%" :rules="rules" ref="ruleForm">
            <!-- 登录标题 -->
            <el-form-item>
                <p style="color:#fff;font-size:20px;font-weight:bold">系统登录</p>
            </el-form-item>

            <!-- 账号 -->
            <el-form-item prop="account">
                <el-input v-model="userInfo.account"></el-input>
            </el-form-item>

            <!-- 密码 -->
            <el-form-item prop="password">
                <el-input v-model="userInfo.password"></el-input>
            </el-form-item>

            <!-- 登录按钮 -->
            <el-form-item>
                <!-- 鼠标触摸按钮，的提示 -->
                <el-tooltip content="点击登录" placement="right" effect="dark">
                    <el-button type="primary" class="loginBtn" @click="doHome">登 录</el-button>
                </el-tooltip>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
// 引入登录接口
import { login } from '@/api/login/login.api';
// 引入element组件库的提示组件
import { Message } from 'element-ui';

export default {
    data() {
        return {
            // 收集账号密码
            userInfo: {
                account: '',
                password: ''
            },
            ruleForm: {
                account: '',
                password: ''
            },
            // 验证
            rules: {
                account: [
                    { required: true, message: '默认没有账号', trigger: 'blur' },
                ],
                password: [
                    { required: true, message: '默认没有密码', trigger: 'blur' },
                ]
            },
        };
    },
    methods: {
        // 登录按钮
        doHome() {
            console.log(this.userInfo);
            // 接口跨域问题
            login(this.userInfo).then(res => {
                console.log(res);
            })

            // 如果账号密码有值才允许进入
            if (this.userInfo.account && this.userInfo.password) {
                Message.success('登录成功');
                setTimeout(() => {
                    this.$router.push('/indexCmpt');
                }, 300);
            } else {
                Message.error('请先输入账号和密码');
            }
        },
    }
}
</script>

<style lang="less" scoped>
#bgBox {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
    background: #2d3a4b;
}

/deep/ .el-input__inner {
    height: 28px;
    background: transparent;
    color: #fff;
}

.loginBtn {
    font-weight: bold;
    width: 100%;
    height: 32px;
    line-height: 10px;
    margin-top: 20px;
}

.el-form-item {
    margin-bottom: 11px;
}

/deep/ .el-form-item__error {
    line-height: 0;
}
</style>